<template>
  <div>
    <!-- 选择检查单 -->
    <el-form
      :model="searchForm"
      ref="searchFormRef"
      :inline="inline_status"
      label-width="80px"
      @keydown.enter="getList()"
    >
      <el-form-item label="检查单号" prop="code">
        <el-input v-model="searchForm.code" placeholder="请输入检查单号" />
      </el-form-item>
      <el-form-item label="联系方式" prop="phone">
        <el-input v-model="searchForm.phone" placeholder="请输入联系方式" />
      </el-form-item>
      <el-form-item>
        <div>
          <el-button type="primary" icon="Search" @click="handleSearch"
            >查询</el-button
          >
          <el-button icon="Refresh" @click="handleReset">重置</el-button>
        </div>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      class="data-table"
      height="calc(var(--main-height) - 7rem)"
      border
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        prop="code"
        label="检查单号"
        show-overflow-tooltip
        fixed
        :min-width="170"
      />
      <el-table-column
        prop="customerName"
        label="客户名称"
        show-overflow-tooltip
        :min-width="120"
      />
      <el-table-column
        prop="baseRelationName"
        label="受检人"
        show-overflow-tooltip
      />
      <el-table-column
        prop="customerPhone"
        label="联系方式"
        show-overflow-tooltip
      />
      <el-table-column prop="createdAt" label="创建时间" :min-width="180" />

      <el-table-column
        prop="address"
        label="检查项目"
        align="center"
        min-width="150"
      >
        <template #default="{ row }">
          <div class="flex flex-wrap">
            <span
              v-for="(item, index) in row.projectList"
              :key="item.id"
              truncated
              class="mr-[0.2rem]"
            >
              {{ item.projectName }}
              <span v-if="index !== row.projectList.length - 1">|</span>
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="状态" align="center">
        <template #default="{ row }">
          <el-tag v-if="row.status == 0" type="primary" link>待检查</el-tag>
          <el-tag v-else type="success" link>完成</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="status" label="操作" fixed="right" width="120">
        <template #default="{ row }">
          <div class="flex flex-col justify-center">
            <el-button
              type="primary"
              class="w-full mb-1"
              @click="handleChange(row)"
              >选择</el-button
            >
            <!-- <el-button type="warning" class="w-full">编辑</el-button> -->
          </div>
        </template>
      </el-table-column>

      <template #empty>
        <span>未查询到客户信息</span>
      </template>
    </el-table>
    <PagingQuery
      :page="page"
      :pageSize="pageSize"
      :total="total"
      @getList="getList"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import PagingQuery from "@/components/PagingQuery.vue";
import { handleApiResponse } from "@/utils/request.js";
import { ListChecklistInfos } from "../../wailsjs/go/api/ReportApi.js";
import { useUserStore } from "@/pinia";
import { storeToRefs } from "pinia";
import { cloneDeep } from "lodash";


onMounted(() => {
  handleResize();
  getList();
});
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});
const handleResize = () => {
  if (window.innerWidth <= 1420) {
    inline_status.value = false;
  } else {
    inline_status.value = true;
  }
};

const emit = defineEmits(["handleBack"]);
const props = defineProps({
  relationId: {
    type: Number,
    default: null,
  },
  detailForm: {
    type: Object,
    default: () => {
      return {};
    },
  },
  flag: {
    type: Boolean,
    default: false,
  },
});

const userStore = useUserStore();
const { checkDetailForm } = storeToRefs(userStore);

const searchFormRef = ref(null);
const searchForm = ref({
  code: "",
  phone: "",
});

const handleSearch = () => {
  getList();
};
const handleReset = () => {
  searchFormRef.value.resetFields();
  getList();
};

const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);

const getList = (val) => {
  if (val) {
    page.value = val.page;
    pageSize.value = val.pageSize;
  }

  handleApiResponse(() =>
    ListChecklistInfos({
      page: page.value,
      size: pageSize.value,
      relationId: props.relationId,
    })
  ).then((res) => {
    if (res.code == 0) {
      //   console.log(res.data.list);
      tableData.value = res.data.list || [];
      total.value = res.data.total || 0;
    }
  });
};

// 选择完检查单
const handleChange = (row) => {
  // console.log(row);
  emit("handleBack", row);
};

const tableRowClassName = ({ row, rowIndex }) => {
  if (props.flag) {
    if (props.detailForm && row.code == props.detailForm.checkCode) {
      return "success-row";
    }
  } else {
    if (
      !row ||
      !row.code ||
      !checkDetailForm.value ||
      !checkDetailForm.value.code
    )
      return "";

    if (row.code == checkDetailForm.value.code) {
      return "success-row";
    }
  }
  return "";
};

const inline_status = ref(true);
window.addEventListener("resize", () => {
  if (window.innerWidth <= 1420) {
    inline_status.value = false;
  } else {
    inline_status.value = true;
  }
});
</script>

<style scoped lang="scss">
.data-table .el-button + .el-button {
  margin-left: 0;
}

.el-table :deep(.success-row) {
  // background-color: #f0f9eb !important;
  color: var(--theme-color);

  /* 添加高亮效果 */
  // box-shadow: inset 0 0 8px #67c23a66;
  font-weight: bold;
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>